<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1440, minimum-scale=0.1, maximum-scale=10, user-scalable=no" />
    <meta name="color-scheme" content="light" />
    <meta name="full-screen" content="yes" />
    <link rel="icon" href="favicon.ico" />
    <title>中数智算</title>
  </head>
  <body>
    <script src="./lib/qrcode.min.js"></script>
    <script src="./lib/vue.global.min.js"></script>
    <link rel="stylesheet" href="./lib/element-plus/index.css" />
    <script src="./lib/element-plus/index.full.min.js"></script>
    <script src="./lib/element-plus/locale/zh-cn.js"></script>
    <script src="./lib/Application.umd.js"></script>
    <script src="./lib/apiDoc.js"></script>
    <!-- 拷贝页面 -->
    <template id="NavCopy">
      <div class="nav-design flex-column" v-loading="loading">
        <el-form :model="form" :rules="rules" :label-width="100">
          <el-form-item label="团队类型" prop="user">
            <el-select class="width-100" clearable placeholder="请选择">
              <el-option label="团队1" value="1"></el-option>
            </el-select>
          </el-form-item>
          <br />
          <div class="form-action text-center">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="save">确认</el-button>
          </div>
        </el-form>
      </div>
    </template>
    <script>
      var NavCopy = {
        extends: BaseComponent,
        template: "#NavCopy",
        name: "NavCopy",
        props: ["design"],
        emits: ["close"],
        data() {
          return {
            options: [
              { label: "张三", value: "张三" },
              { label: "张三1", value: "张三1" },
              { label: "张三2", value: "张三2" },
              { label: "张三3", value: "张三3" }
            ],
            loading: false,
            form: this.design || {},
            rules: [],
            g: [
              {
                name: "数字员工",
                children: [
                  { name: "数字状态", children: [] },
                  { name: "工作记录", children: [] }
                ]
              }
            ]
          };
        },
        computed: {
          checkAll() {
            return 0;
          },
          groups() {
            return [
              {
                name: "数字员工",
                children: [
                  { name: "数字状态", children: [] },
                  { name: "工作记录", children: [] }
                ]
              }
            ];
          }
        },
        created() {
          // this.getData();
        },

        methods: {
          isIndeterminate() {},
          handleCheckAllChange() {},
          cancel() {
            this.$emit(`close`);
          },
          save() {
            this.loading = true;
            this.$g.ajax.$api("member.save", this.form).then((result) => {
              console.log(result);
              this.loading = false;
              this.$g.toast(result.message, result.code == 0 ? "success" : "error");
              this.cancel();
            });
          }
        }
      };
    </script>
    <style>
      .nav-design {
      }
      .card-permission {
        width: 100%;
      }
      .card-permission .el-card {
        background-color: rgb(246, 246, 246);
        width: 49%;
        padding: 10px;
      }
    </style>
    <!-- 表单页面组件 -->
    <template id="NavDesign">
      <div class="nav-design flex-column" v-loading="loading">
        <el-form :model="form" :rules="rules" :label-width="100">
          <el-form-item label="导航名称" prop="user">
            <el-input class="width-100" clearable placeholder="请输入"></el-input>
          </el-form-item>
          <br />
          <div class="form-action text-center">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="save">确认</el-button>
          </div>
        </el-form>
      </div>
    </template>
    <script>
      var NavDesign = {
        extends: BaseComponent,
        template: "#NavDesign",
        name: "NavDesign",
        props: ["design"],
        emits: ["close"],
        data() {
          return {
            options: [
              { label: "张三", value: "张三" },
              { label: "张三1", value: "张三1" },
              { label: "张三2", value: "张三2" },
              { label: "张三3", value: "张三3" }
            ],
            loading: false,
            form: this.design || {},
            rules: [],
            g: [
              {
                name: "数字员工",
                children: [
                  { name: "数字状态", children: [] },
                  { name: "工作记录", children: [] }
                ]
              }
            ]
          };
        },
        computed: {
          checkAll() {
            return 0;
          },
          groups() {
            return [
              {
                name: "数字员工",
                children: [
                  { name: "数字状态", children: [] },
                  { name: "工作记录", children: [] }
                ]
              }
            ];
          }
        },
        created() {
          // this.getData();
        },

        methods: {
          isIndeterminate() {},
          handleCheckAllChange() {},
          cancel() {
            this.$emit(`close`);
          },
          save() {
            this.loading = true;
            this.$g.ajax.$api("member.save", this.form).then((result) => {
              console.log(result);
              this.loading = false;
              this.$g.toast(result.message, result.code == 0 ? "success" : "error");
              this.cancel();
            });
          }
        }
      };
    </script>
    <style>
      .nav-design {
      }
      .card-permission {
        width: 100%;
      }
      .card-permission .el-card {
        background-color: rgb(246, 246, 246);
        width: 49%;
        padding: 10px;
      }
    </style>
    <!-- 管理页面组件 -->
    <template id="FunctionManage">
      <div class="function-allocation-manage flex-column app-page">
        <div class="page-head action-bar flex-row-between flex-row-center">
          <div>团队名称 : {{ $g.session.data || "无" }}</div>
          <el-button type="primary" @click="setDesignCopy({})">功能拷贝</el-button>
        </div>
        <div class="page-body flex-row-between">
          <div class="function-default">
            <div class="title flex-row-between flex-row-center">功能列表</div>
            <div class="view">
              <div><el-input placeholder="请输入"></el-input></div>
              <br />
              <el-tree
                :data="data"
                :props="props"
                default-expand-all
                show-checkbox
                :expand-on-click-node="false"
                :height="208"
                @node-click="nodeClick"
              >
                <template #default="{ node, data }">
                  <div class="tree-node flex-row-between flex-row-center">
                    <span>{{ data.name }}</span>
                    <el-button class v-if="node.level == 1" type="primary" size="small" round v-show="node.checked">
                      <!--  link -->
                      <el-space :size="2">
                        <Icon icon="plus" class="click"></Icon>
                        添加
                      </el-space>
                    </el-button>
                  </div>
                </template>
              </el-tree>
            </div>
          </div>
          <div class="function-custom flex-column">
            <div class="title flex-row-between flex-row-center">
              功能配置表
              <el-button type="primary" @click="setDesign({})">导航创建</el-button>
            </div>
            <Graph
              class="graph-view"
              :data="graphData"
              :config="{
                nodeHeight: 40,
                nodeWidth: 180,
                marginX: 60
              }"
            >
              <template #node="{ node, data }">
                <div
                  class="node-item flex-row-between flex-row-center click"
                  :id="'node' + node.id"
                  :class="{
                    ['level' + data.level || 0]: true,
                    'node-active': data == active
                  }"
                  @click="setActive(data)"
                >
                  <el-space>
                    <!-- <Icon :icon="data.level > 2 ? 'Xiangmu' : 'Bumen'"></Icon> -->
                    {{ data.name }}
                  </el-space>
                  <Icon icon="close" class="click remove"></Icon>
                  <div class="node-item-expand click" v-if="node.children && node.children.length">
                    <Icon v-if="node.children.length" icon="Minus"></Icon>
                  </div>
                </div>
              </template>
            </Graph>
          </div>
          <div class="function-preview">
            <div class="title">功能预览</div>
            <div class="view">
              <div>数字状态(数字员工)</div>
              <el-button href="http://localhost:3001/" type="primary" link>http://localhost:3001</el-button>
            </div>
          </div>
        </div>
        <el-dialog
          width="400px"
          :title="design && design.id ? '导航编辑' : '导航创建'"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
          :model-value="design ? true : false"
          @close="setDesign()"
        >
          <Nav-Design v-if="design" :design="design" @close="setDesign()"></Nav-Design>
        </el-dialog>
        <el-dialog
          width="400px"
          :title="'导航拷贝'"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
          :model-value="designCopy ? true : false"
          @close="setDesignCopy()"
        >
          <Nav-Copy v-if="designCopy" :designCopy="designCopy" @close="setDesignCopy()"></Nav-Copy>
        </el-dialog>
      </div>
    </template>
    <script>
      window.zg_id = new URLSearchParams(location.search).get("zg_id"); //部门id
      // if (!window.zg_id) {
      //   ElementPlus.ElNotification({ title: "错误信息", message: "没有部门id", type: "error" });
      // }
      var FunctionManage = {
        template: "#FunctionManage",
        extends: BaseComponent,
        name: "FunctionManage",
        components: { NavCopy, NavDesign },
        data() {
          return {
            active: null,
            designCopy: null,
            design: null,
            props: {
              value: "value",
              label: "name",
              children: "children"
            }
          };
        },
        computed: {
          graphData() {
            return [
              {
                id: 1,
                level: 1,
                name: "a1"
              },
              {
                id: 2,
                pid: 1,
                level: 2,
                name: "a1-1"
              },
              {
                id: 3,
                pid: 1,
                level: 2,
                name: "a1-2"
              },
              {
                id: 4,
                pid: 1,
                level: 2,
                name: "a1-4"
              },
              {
                id: 5,
                pid: 3,
                level: 3,
                name: "a1-4"
              },
              {
                id: 7,
                pid: 3,
                level: 3,
                name: "a1-3"
              },
              {
                id: 6,
                pid: 5,
                level: 3,
                name: "a1-4"
              }
            ];
          },
          data() {
            return [
              {
                name: "数字员工",
                value: "数字员工",
                children: [{ name: "数字状态", value: "数字状态" }]
              },
              {
                name: "项目管控",
                value: "项目管控",
                children: [{ name: "项目信息", value: "项目信息" }]
              }
            ];
          }
        },
        created() {},
        setup() {},
        methods: {
          setActive(active) {
            this.active = active;
          },
          nodeClick(data, node) {
            console.log(node, data);
          },
          setDesignCopy(design) {
            this.designCopy = design;
          },
          setDesign(design) {
            this.design = design;
          },
          getData() {
            this.$g.ajax.$api("team.getList", this.query).then((result) => {
              console.log(result);
              this.result = result;
            });
          },
          remove(item) {
            this.$g.ajax.$api("team.remove", item).then((result) => {
              console.log(result);
            });
          }
        }
      };
    </script>
    <style>
      .tree-node {
        width: 100%;
      }
      .tree-node .el-button {
        padding: 2px 6px;
      }
      .function-allocation-manage {
        position: relative;
        overflow: auto;
        flex-grow: 1;
      }
      .title {
        padding: 10px;
        border-bottom: 1px solid #2f517e1f;
      }
      .view {
        padding: 10px;
      }
      .graph-view {
        overflow: auto;
        flex-grow: 1;
      }
      .function-custom {
        overflow: auto;
        flex-grow: 1;
        border: 1px solid #2f517e1f;
        border-top: none;
        border-bottom: none;
      }
      .node-item {
        position: absolute;
        inset: 0;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        --r: 8px;
        right: var(--r);
        overflow: visible;
        background-color: var(--el-color-primary);
        color: white;
        padding: 5px 10px;
        border-radius: var(--el-border-radius-base) var(--el-border-radius-base);
        box-sizing: border-box;
      }
      .node-item .remove {
        opacity: 0;
        transition: 0.3s;
      }
      .node-item:hover .remove {
        opacity: 1;
      }
      .level1 {
        inset: -7px var(--r) -7px 0;
        top: -7px;

        bottom: -7px;
        left: 0;
      }
      .level3 {
        background-color: var(--el-color-primary-light-5);
        background-color: #fff;
        border: 1px solid var(--el-color-primary);
        color: initial;
        /* padding-left: 2px; */
      }
      .node-item-expand {
        font-size: 0.5rem;
        position: absolute;
        top: 50%;
        right: calc(var(--r) * -2);
        margin-top: calc(var(--r) * -1);
        border-radius: 14px;
        height: calc(var(--r) * 2);
        width: calc(var(--r) * 2);
        /* background-color: aqua; */
        z-index: -1;
        border-radius: 100%;
        border: 1px solid #2a6dac;
        background-color: white;
        font-size: 12px;
        transform: scale(0.9);
        color: #999;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .function-default,
      .function-preview {
        width: 300px;
      }
    </style>
    <!-- 接口配置 -->
    <script>
      window.$g.ajax.apiDoc.sq_team_admin = {
        GetAdminList: {
          name: "获得主管部门下的用户列表",
          url: "api/sq_team_admin/GetAdminList",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        GetGorvermentNameById: {
          name: "获得主管部门的名称",
          url: "api/sq_team_admin/GetGorvermentNameById",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        GetGorvermentAdminById: {
          name: "根据id返回一个主管部门用户对象",
          url: "api/sq_team_admin/GetGorvermentAdminById", //GET /api/sq_team_admin/GetGorvermentAdminById
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        InsertGorvermentAdmin: {
          name: "添加一个主管部门用户对象",
          url: "api/sq_team_admin/InsertGorvermentAdmin", //POST /api/sq_team_admin/InsertGorvermentAdmin
          method: "POST",
          packagingRequest: function (param) {
            return {
              data: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        UpdateGorvermentAdmin: {
          name: "更新主管部门用户",
          url: "api/sq_team_admin/UpdateGorvermentAdmin", //POST /api/sq_team_admin/UpdateGorvermentAdmin
          method: "POST",
          packagingRequest: function (param) {
            return {
              data: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        DeleteGorvermentAdmin: {
          name: "删除主管部门用户",
          url: "api/sq_team_admin/DeleteGorvermentAdmin", //POST /api/sq_team_admin/DeleteGorvermentAdmin
          method: "POST",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        }
      };
    </script>
    <!-- 页面渲染入口 -->
    <link rel="stylesheet" href="./lib/app.css" />
    <div id="app" class="abs app flex-column"></div>
    <template id="dom-app">
      <Function-Manage></Function-Manage>
    </template>
    <script>
      window.$message = ElementPlus.ElMessage;
      var App = {
        extends: BaseComponent,
        template: "#dom-app",
        components: { FunctionManage }
      };
      var app = Vue.createApp(Application, { app: App }); //渲染入口
      app.use(ElementPlus, { locale: ElementPlusLocaleZhCn }); //ui库
      app.use(Application); //公共组件库
      window.$app = app;
      window.app = app.mount("#app");
    </script>
  </body>
</html>
